<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天记录</title>
    <link rel="stylesheet" href="../../../layui.css">
    <style>
    body .layim-chat-main {
        height: auto;
    }
    </style>
</head>

<body>
    <div class="layim-chat-main">
        <ul id="LAY_view"></ul>
        <div id="test1"></div>
    </div>
    <div id="LAY_page" style="margin: 0 10px;"></div>
   
    <!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->
    <script src="../../../../layui.js"></script>
    <script>
    layui.use(['layim', 'laypage'], function() {
        var layim = layui.layim,
            layer = layui.layer,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            laypage = layui.laypage;

        init();

        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };

        function init() {
            $.ajaxSetup({
                headers: {
                    'access-token': window.parent.tokenId
                }
            });

            var id = getQueryString("id"),
                type = getQueryString("type"),
                sessionKey = getQueryString("sessionKey"),
                i = {
                    id: id,
                    type: type
                };
            list(i, sessionKey, 1, function(i, sessionKey, res) {
                initPage(i, sessionKey, res);
            });
        };

        function list(i, sessionKey, pageNum, callback) {
            var cache = window.parent.layui.layim.cache(),
                local = window.parent.layui.data('layim')[cache.mine.id],
                logs = local.chatlog || {},
                myLogs = logs[i.type + i.id];
            $.ajax({
                    url: '/ws/message/' + sessionKey + '/' + pageNum + "/10",
                    type: 'GET',
                    contentType: "application/json"
                })
                .done(function(res) {
                    callback && callback(i, sessionKey, res);
                    var mine = cache.mine,
                        data = syncChatLog(myLogs, res.data, i, mine),
                        html = laytpl(LAY_tpl.value).render({ data: data });
                    $('#LAY_view').html(html);
                    $(function() {
                        var h = $(document).height() - $(window).height();
                        $(document).scrollTop(h);
                    });
                })
                .fail(function(res) {
                    console.log("error" + res);
                });
        };

        function initPage(i, sessionKey, res) {
            laypage.render({
                elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
                count: res.data.total, //数据总数，从服务端得到
                jump: function(obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        list(i, sessionKey, obj.curr);
                    }
                }
            });
        };

        function syncChatLog(myLogs, data, res, mine) {
            var logs = [];
            var len = data.list.length;
            while (len--) {
                var d = dataToLog(data.list[len], mine);
                logs.push(d);
            }
            myLogs.unshift.apply(myLogs, logs);
            var cache = window.parent.layui.layim.cache(),
                local = window.parent.layui.data('layim')[cache.mine.id];
            local.chatlog = local.chatlog || {};
            local.chatlog[res.type + res.id] = myLogs;
            layui.data('layim', {
                key: cache.mine.id,
                value: local
            });
            return logs;
        };

        function dataToLog(data, mine) {
            var c = '';
            if (data.type === 'TEXT') {
                c = data.data;
            } else if (data.type === 'IMAGE') {
                c = "img[" + data.data.imgUrl + "]";
            } else if (data.type === 'FILE') {
                c = "file(" + data.data.fileUrl + ")[" + data.data.name + "]";
            } else if (data.type === 'VOICE') {
                c = "audio[" + data.data.voiceUrl + "]";
            } else if (data.type === 'LOCATION') {
                c = "[位置] " + data.data.addressLabel;
            }
            var d = {
                avatar: window.parent.layui.layim.allUser[data.senderId].avatar,
                content: c,
                id: data.receiverId,
                mine: (data.senderId === mine.id),
                timestamp: (new Date(data.createDate).getTime()),
                type: (data.sessionType === 'GROUP' ? 'group' : 'friend'),
                username: window.parent.layui.layim.allUser[data.senderId].username
            }
            return d;
        }



        // //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html


        // //开始请求聊天记录
        // var param =  location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据

        // //实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
        // ,res = {
        //   code: 0
        //   ,msg: ''
        //   ,data: [{
        //     username: '纸飞机'
        //     ,id: 100000
        //     ,avatar: '//tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897882000
        //     ,content: 'face[抱抱] face[心] 你好啊小美女'
        //   }, {
        //     username: 'Z_子晴'
        //     ,id: 108101
        //     ,avatar: '//tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897892000
        //     ,content: '你没发错吧？face[微笑]'
        //   },{
        //     username: 'Z_子晴'
        //     ,id: 108101
        //     ,avatar: '//tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897898000
        //     ,content: '你是谁呀亲。。我爱的是贤心！我爱的是贤心！我爱的是贤心！重要的事情要说三遍~'
        //   },{
        //     username: 'Z_子晴'
        //     ,id: 108101
        //     ,avatar: '//tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897908000
        //     ,content: '注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录（相对于layui.js）：\n/css/modules/layim/html/chatlog.html'
        //   }]
        // }

        // //console.log(param)

        // var html = laytpl(LAY_tpl.value).render({
        //   data: res.data
        // });
        // $('#LAY_view').html(html);

    });
    </script>
</body>

</html>